<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>加星文件</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <link rel="stylesheet" href="css/layui-theme-custom.css"/>
    <link rel="stylesheet" href="css/mytest.css"/>
    <link rel="stylesheet" href="css/note_list.css"/>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>

<body>
<div class="body_left">
    <div class="right_top">
        <i class="iconfont icon-fanhui"
           style="font-size: 34px ;line-height: 56px;float: left; margin-left: 20px; color: #DFE2E8;"></i>
        <div class="search layui-btn-radius">
            <i class="iconfont icon-sousuo" style="float: left;margin-left: 5px;color: #DFE2E8;"></i>
            <input type="text" name="title" required lay-verify="required" placeholder="搜索..." autocomplete="off"
                   class="searchinput">
        </div>
        <i class="iconfont icon-icon-" style="float: right; margin-right: 20px;color: #DFE2E8;"></i>
    </div>
    <ul id="notes">
        <li v-for="(note,index) in info.data" :id="forId(index)">
            <div class="welcome">
                <div class="test" :id="forDivId(index)" hidden="hidden">
                    <ul class="ulCheck">
                        <li class="idLi" hidden="hidden">{{note.id}}</li>
                        <li class="idLi" hidden="hidden">{{note.notesName}}</li>
                        <li class="onTopLi">置顶</li>
                        <li class="renameLi">重命名</li>
                        <li class="removeLi">移动到</li>
                        <li class="deleteLi">删除</li>
                        <li class="shareLi">分享</li>
                        <li class="readPwaLi">阅读密码</li>
                    </ul>
                </div>
                <div class="noteid" hidden="hidden">{{note.id}}</div>
                <div style="height: 20px;"></div>
                <div class="Ntop"><img class="noteimg" :src="note.icon" width="16px" height="16px"/><span
                        v-if="note.type=='0'" class="Ntitle">{{note.notesName}}.md</span>
                    <span v-if="note.type=='1'" class="Ntitle">{{note.notesName}}</span>
                    <div class="noteType" hidden="hidden">{{note.type}}</div>
                    <span class="images" :value="note.id">
											<img :src="'img/star'+note.favorite+'.png'"
                                                 onMouseOver="this.src='img/star2.png'"
                                                 onclick="change(this)"
                                                 :onMouseOut="'mouse('+note.favorite+')'" height="14px" width="14px"
                                                 class="star"/>
											<img src="img/share1.png" onMouseOver="this.src='img/share2.png'"
                                                 onMouseOut="this.src='img/share1.png'" height="26px" width="26px"
                                                 class="share"/>
											<img src="img/down1.png" v-if="note.type=='0'"
                                                 onMouseOver="this.src='img/down2.png'"
                                                 onMouseOut="this.src='img/down1.png'" height="19px" width="19px"
                                                 class="down"/>
											<img src="img/delete1.png" onMouseOver="this.src='img/delete2.png'"
                                                 onMouseOut="this.src='img/delete1.png'" height="21px" width="21px"
                                                 class="delete"/>
										</span>
                </div>
                <div class="content" v-if="note.content!=null">{{note.content}}</div>
                <div class="Nbottom">
                    <span>{{note.updateTime}}</span><span class="kb">{{note.size}}KB</span>
                </div>
                <span hidden="hidden" id="nodeId">{{note.id}}</span>
                <span hidden="hidden" id="userId">{{note.userId}}</span>
            </div>
        </li>
    </ul>
</div>
<script src="js/layui/layui.js"></script>
<script src="js/jquery-3.4.1.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var $ = layui.$;
        var layer = layui.layer; /*点击事件*/
        //图标删除

        $('body').on('click', '.delete', function () {
            var dId = $(this).parent().parent().next().next().next().text();
            console.log(dId);
            $.ajax({
                data: {
                    id: dId,
                    token: sessionStorage.getItem("accessToken"),
                },
                url: 'http://localhost:9097/notes/deleteNote',
                success: function (d) {
                    if (d.rs) {
                        parent.layer.msg('删除成功', {icon: 1});
                        /*window.location.reload();*/
                        $('.body_left').empty();
                        $('.body_left').load('favoritePage');
                    }
                }
            })
        })


        /*笔记列表*/
        var a = new Vue({
            el: '#notes', //绑定
            data() { //数据
                return {
                    info: []
                }
            },
            mounted : function(){
                axios.get('http://localhost:9097/notes/findFavorite', {
                    params: {
                        userId: sessionStorage.getItem("accessToken"),
                        token: sessionStorage.getItem("accessToken")
                    }
                })
                    .then(response => (this.info = response))
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            methods: {
                forId: function (index) {
                    return "welcome" + index
                },
                forDivId: function (index) {
                    return "rightClick" + index
                }
            }
        });
    });

    //加星
    function mouse(d) {
        if (d==1){
            this.src="img/star1.png"
        }else {
            this.src="img/star2.png"
        }
    }

    var toggle = true;

    function change(d) {
        console.log("asd")
        var id = $(d).parent().attr("value");
        if (toggle) {
            $('.star').attr('src', 'img/star2.png');
            $('.star').removeAttr("onMouseOut");
            $('.star').unbind();
            toggle = false;

            $.ajax({
                type: 'get',
                async: false, //同步或异步,
                contentType: 'application/json',
                url: 'http://localhost:9097/notes/setfavorite?id='+id,
                success: function(d) {},

            })
        } else {
            $('.star').mouseout(function () {
                $('.star').attr('src', 'img/star1.png');
            })
            toggle = true;
            $.ajax({
                type: 'get',
                async: false, //同步或异步,
                contentType: 'application/json',
                url: 'http://localhost:9097/notes/nofavorite?id='+id,
                success: function() {
                    $('.body_left').empty();
                    $('.body_left').load('favoritePage');
                },
            })

        }
    }


</script>
</body>

</html>